<template>
    <div id="UserView">
        <a-form :model="queryForm" layout="inline" style="width: 100%;background-color: white">
            <a-form-item field="title" label="用户名" style="min-width: 240px">
                <a-input v-model="queryForm.userName" placeholder="请输入用户名"/>
            </a-form-item>
            <a-form-item field="tags" label="手机号" style="min-width: 240px">
                <a-input v-model="queryForm.userPhone" placeholder="请输入手机号"/>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="doSubmit">搜索</a-button>
            </a-form-item>
        </a-form>
        <a-divider size="0"/>
        <div class="gridView">
            <template v-for="item in dataList ">
                <a-card :style="{ width: '360px' }">
                    <template #actions>
                        <span class="icon-hover"> <IconShareInternal/> </span>
                    </template>
                    <template #cover>
                        <div
                                :style="{
          height: '204px',
          overflow: 'hidden'
        }"
                        >
                            <img
                                    style="width: 100%;height: 100%;object-fit:contain; transform: translateY(-20px);"
                                    alt="dessert"
                                    :src="item.foodImg"
                            />
                        </div>
                    </template>
                    <a-card-meta :title="item.foodName" :description="item.foodExplain">
                        <template #avatar>
                            <div
                                    :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
                            >
                                <a-avatar :image-url=item.businessImg :size="24" :style="{ marginRight: '8px' }">
                                </a-avatar>
                                <a-typography-text>{{ item.businessName }}</a-typography-text>
                            </div>
                        </template>
                    </a-card-meta>
                </a-card>
            </template>

        </div>
    </div>
</template>
<script setup lang="ts">
import {onMounted, ref, watchEffect} from "vue";

import {IconThumbUp, IconShareInternal, IconMore} from "@arco-design/web-vue/es/icon";
import {UserLoginInfo} from "../type/user";
import {FoodVO} from "../type/food.ts";
import {getFoodsAPI} from "../service/food.ts";

const queryForm = ref({
    userName: "",
    userPhone: "",
})
const dataList = ref<FoodVO[]>([]);

/**
 * 页面加载时，请求数据
 */
onMounted(async () => {
    const res = await getFoodsAPI();
    dataList.value = res.data;
});

const doSubmit = () => {

}


</script>

<style scoped>
.icon-hover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: all 0.1s;
}

.icon-hover:hover {
    background-color: rgb(var(--gray-2));
}

.gridView {
    width: 80vw;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 5vw;
}
</style>
